<template>
<div class="container">
  <div class="leftBtn">
    <div
      v-for="(item, index) in baseList"
      :key="index"
      class="left"
    >
      <a
        :class="[active == index ? 'active' : 'no_active']"
        @click="infoClick(item,index)"
        >{{ item.name }}</a
        >
    </div>
  </div>
  <div class="main">
    <div v-for="(item, index) in baseList" :key="index" ref="right" class="right">
        <div
        style="height:500px"
        >
        <h1>{{item.name}}</h1>
        </div>
    </div>
  </div>
</div>
</template>

<script>
// https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView
export default{
  data(){
    return{
      baseList: [
        { name: '基本信息' },
        { name: '工作方向' },
        { name: '工作贡献' },
        { name: '工作领域' },
        { name: '成长趋势' },
        { name: '成果1'},
        { name: '成果2'},
        { name: '履历'},
        { name: '履历迁移图'},
        { name: '工作同事'},
        { name: '合作领导'},
        { name: '合作领导分布'},
        { name: '个人观点'},
        { name: '领导人'},
        { name: '推荐人'}
      ],
      active: 0
    }
  },
  methods: {
    infoClick(item,index) {
      console.log(item,index)
      let _article = this.$refs.right
      console.log(_article)
      _article.forEach((items, index) => {
        if (item.name == items.innerText) {
          document.documentElement.scrollTop = items.offsetTop
        }
      })
    },
    onScroll() {
      let scrolled = document.documentElement.scrollTop;
      // let _article = document.querySelectorAll(".pos");
      let _article = this.$refs.right
      _article.forEach((item, index) => {
          // scrolled += 50
        if (scrolled >= item.offsetTop) {
          this.active = index;
        }
      });
    },
  },
  watch: {
    apiCount(a, b) {
      if (a == 16) {
        // this.dom.hideLoading()
        this.baseLoading = false;
      }
    },
  },
  mounted(){
    // this.scrollItem()
    this.$nextTick(function () {
      window.addEventListener("scroll", this.onScroll);
    });
  }
}
</script>

<style scoped>
/* @keyframes move {
  0%{
    transform: translateY(100px);
  }
  50%{
    transform: translateY(50px);
  }
  100%{
    transform: translateY(0px);
  }
}
.animation{
  animation: move 3s infinite;
} */
.no_active{
  color: green
}
.active{
  color: red
}
.container {
 display: flex;
 position: relative;
}
.leftBtn{
  flex:1;
  position: fixed;
}
.main{
  flex: 4;
}
/* .right{
  overflow-y: scroll;
} */
</style>